<template>
  <div class="Marketing">
    <HomeTop/>
    <div class="marketing_top">
      <img src="../assets/imgs/marketing/marketing_banner_pic.jpg" alt="" />
      <div class="marketing_top_soft animate-el">
        <img src="../assets/imgs/product/product.png" alt="" />
      </div>
    </div>
    <div class="Marketing_content">
      <div class="Marketing_content1">
        <div class="Marketing_content1_beijin">
          <img src="../assets/imgs/marketing/introduce_bg.png" alt="" />
          <img class="zoomin" src="../assets/imgs/marketing/introduce_pic_1.png" alt="" />
          <div class="Marketing_content1_beijin_wenzi animate-el">
            <h2>拼团--快速拓客、高效转化</h2>
          </div>
          <div class="Marketing_content1_beijin_jieshao animate-el">
            <h2>
              <p>传播速度快，订单转换率高，拉新效率明</p>
              <p>显；一键切换，便捷高效，提升商家和顾</p>
              <p>客的操作体验</p>
            </h2>
          </div>
        </div>
      </div>
      <div class="Marketing_content2">
        <div class="Marketing_content2_beijin">
          <img src="../assets/imgs/marketing/introduce_bg.png" alt="" />
          <img class="zoomin" src="../assets/imgs/marketing/introduce_pic_2.png" alt="" />
          <div class="Marketing_content2_beijin_wenzi animate-el">
            <h2>核裂变</h2>
            <h2>--有奖分销，社交裂变式传播</h2>
          </div>
          <div class="Marketing_content2_beijin_jieshao animate-el">
            <h2>
              <p>商家可灵活设置奖励机制，有偿推广，极</p>
              <p>大地提高了客户分享积极性，省去销售推</p>
              <p>广的成本，实现双向共赢</p>
            </h2>
          </div>
        </div>
      </div>
      <div class="Marketing_content3">
        <div class="Marketing_content3_beijin">
          <img src="../assets/imgs/marketing/introduce_bg.png" alt="" />
          <img class="zoomin" src="../assets/imgs/marketing/introduce_pic_3.png" alt="" />
          <div class="Marketing_content3_beijin_wenzi animate-el">
            <h2>闺蜜卡--便于分享，快速裂变</h2>
          </div>
          <div class="Marketing_content3_beijin_jieshao animate-el">
            <h2>
              <p>告别传统的纸质优惠券，易于保存，便于</p>
              <p>分享；以老带新，奖励机制，提高分享积</p>
              <p>极性，加速裂变！</p>
            </h2>
          </div>
        </div>
      </div>
      <div class="Marketing_content4">
        <div class="Marketing_content4_beijin">
          <img src="../assets/imgs/marketing/introduce_bg.png" alt="" />
          <img class="zoomin" src="../assets/imgs/marketing/introduce_pic_4.png" alt="" />
          <div class="Marketing_content4_beijin_wenzi animate-el">
            <h2>引流</h2>
            <h2>--适用场景广泛，引流更高效</h2>
          </div>
          <div class="Marketing_content4_beijin_jieshao animate-el">
            <h2>
              <p>集特价、限时抢购、有奖分销、操作简</p>
              <p>等优势为一体，适用于各行各业，帮助商</p>
              <p>家快速积累门店客源。</p>
            </h2>
          </div>
        </div>
      </div>
      <div class="Marketing_content5">
        <div class="Marketing_content5_beijin">
          <img src="../assets/imgs/marketing/introduce_bg.png" alt="" />
          <img class="zoomin" src="../assets/imgs/marketing/introduce_pic_5.png" alt="" />
          <div class="Marketing_content5_beijin_wenzi animate-el">
            <h2>自定义商城</h2>
            <h2>--激发购买欲，提高复购率</h2>
          </div>
          <div class="Marketing_content5_beijin_jieshao animate-el">
            <h2>
              <p>个性化定制商城，吸引客户眼球，激发购</p>
              <p>买欲；线上用户全周期管理，提升客户体</p>
              <p>验，提高复购率</p>
            </h2>
          </div>
        </div>
      </div>
      <div class="Marketing_content6">
        <div class="Marketing_content6_beijin">
          <img src="../assets/imgs/marketing/introduce_bg.png" alt="" />
          <img class="zoomin" src="../assets/imgs/marketing/introduce_pic_6.png" alt="" />
          <div class="Marketing_content6_beijin_wenzi animate-el">
            <h2>预约</h2>
            <h2>--提升用户体验，实现高效留存</h2>
          </div>
          <div class="Marketing_content6_beijin_jieshao animate-el">
            <h2>
              <p>随时随地在线进行预约，免排队零等候，</p>
              <p>实现商家和顾客的时间、资源精准匹配，</p>
              <p>提升客户服务体验</p>
            </h2>
          </div>
        </div>
      </div>
       <div class="Marketing_content7">
        <div class="Marketing_content7_beijin">
          <img src="../assets/imgs/marketing/introduce_bg.png" alt="" />
          <img class="zoomin" src="../assets/imgs/marketing/introduce_pic_7.png" alt="" />
          <div class="Marketing_content7_beijin_wenzi animate-el">
            <h2>大转盘</h2>
            <h2>--多元化消耗积分，增加互动</h2>
          </div>
          <div class="Marketing_content7_beijin_jieshao animate-el">
            <h2>
              <p>个性化定制商城，吸引客户眼球，激发购</p>
              <p>买欲；线上用户全周期管理，提升客户体</p>
              <p>验，提高复购率</p>
            </h2>
          </div>
        </div>
      </div>
      <div class="Marketing_content8">
        <div class="Marketing_content8_beijin">
          <img src="../assets/imgs/marketing/introduce_bg.png" alt="" />
          <img class="zoomin" src="../assets/imgs/marketing/introduce_pic_8.png" alt="" />
          <div class="Marketing_content8_beijin_wenzi animate-el">
            <h2>红包墙--刺激消费，低成本营销</h2>
          </div>
          <div class="Marketing_content8_beijin_jieshao animate-el">
            <h2>
              <p>随时随地在线进行预约，免排队零等候，</p>
              <p>实现商家和顾客的时间、资源精准匹配，</p>
              <p>提升客户服务体验</p>
            </h2>
          </div>
        </div>
      </div>
        <div class="Marketing_content9">
        <div class="Marketing_content9_beijin">
          <img src="../assets/imgs/marketing/introduce_bg.png" alt="" />
          <img class="zoomin" src="../assets/imgs/marketing/introduce_pic_9.png" alt="" />
          <div class="Marketing_content9_beijin_wenzi animate-el">
            <h2>盲盒</h2>
            <h2>--激发客户需求，趣味引流</h2>
          </div>
          <div class="Marketing_content9_beijin_jieshao animate-el">
            <h2>
              <p>盲盒具有神秘性、随机性，未知的惊喜更</p>
              <p>容易激发年轻人的心理需求，利用盲盒效</p>
              <p>应助力门店拓客引流。</p>
            </h2>
          </div>
        </div>
      </div>
      
      <div class="Marketing_content10">
        <div class="Marketing_content10_beijin">
          <img src="../assets/imgs/marketing/introduce_bg.png" alt="" />
          <img class="zoomin" src="../assets/imgs/marketing/introduce_pic_10.png" alt="" />
          <div class="Marketing_content10_beijin_wenzi animate-el">
              <h2>免单券</h2>
            <h2>--免单“诱惑”，轻松拓客</h2>
          </div>
          <div class="Marketing_content10_beijin_jieshao animate-el">
            <h2>
              <p>消费者们普遍难以抵挡免单“诱惑”，免</p>
              <p>单券能够帮助商家快速抓住客户的注意</p>
              <p>力，进而达到轻松拓客的目的。</p>
            </h2>
          </div>
        </div>
      </div>
     
    
  </div>
   <div class="bottom-tips">
     <div class="bottom-tips_h2 animate-el">
        <h2> 超多升单锁客神器，就等你来探索!</h2>
     </div>
            </div>
<HomeBottom/>
    </div>
</template>

<script>
import Observer from '../utils/observer';
import HomeTop from "@/components/Hometop.vue";
import HomeBottom from "@/components/Homebottom.vue";
export default {
  name: "Marketing",
  components: {
    HomeTop,
    HomeBottom,
  },
   mounted() {
    const els = document.querySelectorAll(".animate-el");
    this.Observer = Observer(
      {
        els: els,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__fadeInDown");
      }
    );
    const els2 = document.querySelectorAll(".zoomin");
    this.Observer2 = Observer(
      {
        els: els2,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__zoomIn");
      }
    );
    let registerData = {
      companyName: "",
      phoneNumber: "",
      linkman: "",
      companyAdress: "",
      leaveMessage: "",
    };
  },
};
</script>

<style scoped>
.Marketing {
  box-sizing: border-box;
}
.marketing_top img {
  width: 100%;
  height: 659px;
}
.marketing_top_soft {
  width: 833px;
  height: 124px;
  margin: auto;
  margin-top: 100px;
}
.marketing_top_soft img {
  width: 833px;
  height: 124px;
}
.Marketing_content {
  width: 1367px;
  height: 4500px;
  margin: auto;
  margin-top: 200px;
  position: relative;
  box-sizing: border-box;
}
.Marketing_content1 {
  width: 617px;
  height: 752px;
  color: #f56f7e;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  border: 1px dashed #f56f7e;
  border-radius: 50px;
  position: relative;
  top: 0%;
}
.Marketing_content1_beijin {
  position: absolute;
  top: -17%;
  left: 4%;
}
.Marketing_content1_beijin img:nth-child(2) {
  position: absolute;
  top: 18%;
  left: 13%;
  max-width: 70%;
  height: auto;
}
.Marketing_content1_beijin_wenzi {
  width: 447px;
  height: 60px;
  border-bottom: 1px dashed #f56f7e;
  position: absolute;
  top: 61%;
  left: 12%;
  font-size: 22px;
}
.Marketing_content1_beijin_wenzi h2 {
  font-weight: 700;
}
.Marketing_content1_beijin_jieshao {
  width: 447px;
  height: 107px;
  position: absolute;
  top: 73%;
  left: 12%;
}
.Marketing_content1_beijin_jieshao h2 p {
  font-size: 20px;
  color: rgb(39, 37, 37);
  font-weight: 500;
  line-height: 33px;
}

.Marketing_content2 {
  width: 617px;
  height: 752px;
  color: #f56f7e;
  font-weight: 500;
  float: right;
  white-space: nowrap;
  border: 1px dashed #f56f7e;
  border-radius: 50px;
  position: relative;
 top: -755px;
  left: 0%;
}
.Marketing_content2_beijin {
  position: absolute;
  top: -17%;
  left: 4%;
}
.Marketing_content2_beijin img:nth-child(2) {
  position: absolute;
  top: 11%;
  left: 21%;
  max-width: 43%;
  height: auto;
}
.Marketing_content2_beijin_wenzi {
  width: 447px;
  height: 60px;
  border-bottom: 1px dashed #f56f7e;
  position: absolute;
  top: 61%;
  left: 12%;
  font-size: 22px;
}
.Marketing_content2_beijin_wenzi h2:nth-child(1) {
  font-weight: 700;
  position: absolute;
  top: -84%;
  left: 0%;
}
.Marketing_content2_beijin_wenzi h2 {
  font-weight: 700;
}
.Marketing_content2_beijin_jieshao {
  width: 447px;
  height: 107px;
  position: absolute;
  top: 73%;
  left: 12%;
}
.Marketing_content2_beijin_jieshao h2 p {
  font-size: 20px;
  color: rgb(39, 37, 37);
  font-weight: 500;
  line-height: 33px;
}
.Marketing_content3 {
  width: 617px;
  height: 752px;
  color: #f56f7e;
  font-weight: 500;
  float: left;
  white-space: nowrap;
  border: 1px dashed #f56f7e;
  border-radius: 50px;
  position: relative;
  top: 6%;
}
.Marketing_content3_beijin {
  position: absolute;
  top: -17%;
  left: 4%;
}
.Marketing_content3_beijin img:nth-child(2) {
  position: absolute;
  top: 18%;
  left: 13%;
  max-width: 70%;
  height: auto;
}
.Marketing_content3_beijin_wenzi {
  width: 447px;
  height: 60px;
  border-bottom: 1px dashed #f56f7e;
  position: absolute;
  top: 61%;
  left: 12%;
  font-size: 22px;
}
.Marketing_content3_beijin_wenzi h2 {
  font-weight: 700;
}
.Marketing_content3_beijin_jieshao {
  width: 447px;
  height: 107px;
  position: absolute;
  top: 73%;
  left: 12%;
}
.Marketing_content3_beijin_jieshao h2 p {
  font-size: 20px;
  color: rgb(39, 37, 37);
  font-weight: 500;
  line-height: 33px;
}
.Marketing_content4 {
  width: 617px;
  height: 752px;
  color: #f56f7e;
  font-weight: 500;
  float: right;
  white-space: nowrap;
  border: 1px dashed #f56f7e;
  border-radius: 50px;
  position: relative;
  top: -485px;
}
.Marketing_content4_beijin {
  position: absolute;
  top: -17%;
  left: 4%;
}
.Marketing_content4_beijin img:nth-child(2) {
  position: absolute;
  top: 11%;
  left: 21%;
  max-width: 43%;
  height: auto;
}
.Marketing_content4_beijin_wenzi {
  width: 447px;
  height: 60px;
  border-bottom: 1px dashed #f56f7e;
  position: absolute;
  top: 61%;
  left: 12%;
  font-size: 22px;
}
.Marketing_content4_beijin_wenzi h2:nth-child(1) {
  font-weight: 700;
  position: absolute;
  top: -84%;
  left: 0%;
}
.Marketing_content4_beijin_wenzi h2 {
  font-weight: 700;
}
.Marketing_content4_beijin_jieshao {
  width: 447px;
  height: 107px;
  position: absolute;
  top: 73%;
  left: 12%;
}
.Marketing_content4_beijin_jieshao h2 p {
  font-size: 20px;
  color: rgb(39, 37, 37);
  font-weight: 500;
  line-height: 33px;
}
.Marketing_content5 {
  width: 617px;
  height: 752px;
  color: #f56f7e;
  font-weight: 500;
  float: left;
  white-space: nowrap;
  border: 1px dashed #f56f7e;
  border-radius: 50px;
  position: relative;
  top: 12%;
}
.Marketing_content5_beijin {
  position: absolute;
  top: -17%;
  left: 4%;
}
.Marketing_content5_beijin img:nth-child(2) {
  position: absolute;
  top: 18%;
  left: 13%;
  max-width: 52%;
  height: auto;
}
.Marketing_content5_beijin_wenzi h2:nth-child(1) {
  font-weight: 700;
  position: absolute;
  top: -84%;
  left: 0%;
}
.Marketing_content5_beijin_wenzi {
  width: 447px;
  height: 60px;
  border-bottom: 1px dashed #f56f7e;
  position: absolute;
  top: 64%;
  left: 12%;
  font-size: 22px;
}
.Marketing_content5_beijin_wenzi h2 {
  font-weight: 700;
}
.Marketing_content5_beijin_jieshao {
  width: 447px;
  height: 107px;
  position: absolute;
  top: 73%;
  left: 12%;
}
.Marketing_content5_beijin_jieshao h2 p {
  font-size: 20px;
  color: rgb(39, 37, 37);
  font-weight: 500;
  line-height: 33px;
}
.Marketing_content6 {
  width: 617px;
  height: 752px;
  color: #f56f7e;
  font-weight: 500;
  float: right;
  white-space: nowrap;
  border: 1px dashed #f56f7e;
  border-radius: 50px;
  position: relative;
 top: -214px;
}
.Marketing_content6_beijin {
  position: absolute;
  top: -17%;
  left: 4%;
}
.Marketing_content6_beijin img:nth-child(2) {
  position: absolute;
  top: 21%;
  left: 19%;
  max-width: 60%;
  height: auto;
}
.Marketing_content6_beijin_wenzi {
  width: 447px;
  height: 60px;
  border-bottom: 1px dashed #f56f7e;
  position: absolute;
  top: 63%;
  left: 12%;
  font-size: 22px;
}
.Marketing_content6_beijin_wenzi h2:nth-child(1) {
  font-weight: 700;
  position: absolute;
  top: -84%;
  left: 0%;
}
.Marketing_content6_beijin_wenzi h2 {
  font-weight: 700;
}
.Marketing_content6_beijin_jieshao {
  width: 447px;
  height: 107px;
  position: absolute;
  top: 73%;
  left: 12%;
}
.Marketing_content6_beijin_jieshao h2 p {
  font-size: 20px;
  color: rgb(39, 37, 37);
  font-weight: 500;
  line-height: 33px;
}

.Marketing_content7 {
  width: 617px;
  height: 752px;
  color: #f56f7e;
  font-weight: 500;
  float: left;
  white-space: nowrap;
  border: 1px dashed #f56f7e;
  border-radius: 50px;
  position: relative;
  top: 18%;
}
.Marketing_content7_beijin {
  position: absolute;
  top: -17%;
  left: 4%;
}
.Marketing_content7_beijin img:nth-child(2) {
  position: absolute;
  top: 18%;
  left: 13%;
  max-width: 52%;
  height: auto;
}
.Marketing_content7_beijin_wenzi h2:nth-child(1) {
  font-weight: 700;
  position: absolute;
  top: -84%;
  left: 0%;
}
.Marketing_content7_beijin_wenzi {
  width: 447px;
  height: 60px;
  border-bottom: 1px dashed #f56f7e;
  position: absolute;
  top: 64%;
  left: 12%;
  font-size: 22px;
}
.Marketing_content7_beijin_wenzi h2 {
  font-weight: 700;
}
.Marketing_content7_beijin_jieshao {
  width: 447px;
  height: 107px;
  position: absolute;
  top: 73%;
  left: 12%;
}
.Marketing_content7_beijin_jieshao h2 p {
  font-size: 20px;
  color: rgb(39, 37, 37);
  font-weight: 500;
  line-height: 33px;
}

.Marketing_content8 {
  width: 617px;
  height: 752px;
  color: #f56f7e;
  font-weight: 500;
  float: right;
  white-space: nowrap;
  border: 1px dashed #f56f7e;
  border-radius: 50px;
  position: relative;
  top: 54px;
}
.Marketing_content8_beijin {
  position: absolute;
  top: -17%;
  left: 4%;
}
.Marketing_content8_beijin img:nth-child(2) {
  position: absolute;
  top: 21%;
  left: 19%;
  max-width: 60%;
  height: auto;
}
.Marketing_content8_beijin_wenzi {
  width: 447px;
  height: 60px;
  border-bottom: 1px dashed #f56f7e;
  position: absolute;
  top: 63%;
  left: 12%;
  font-size: 22px;
}
.Marketing_content8_beijin_wenzi h2 {
  font-weight: 700;
}
.Marketing_content8_beijin_jieshao {
  width: 447px;
  height: 107px;
  position: absolute;
  top: 73%;
  left: 12%;
}
.Marketing_content8_beijin_jieshao h2 p {
  font-size: 20px;
  color: rgb(39, 37, 37);
  font-weight: 500;
  line-height: 33px;
}


.Marketing_content9 {
  width: 617px;
  height: 752px;
  color: #f56f7e;
  font-weight: 500;
  float: left;
  white-space: nowrap;
  border: 1px dashed #f56f7e;
  border-radius: 50px;
  position: relative;
  top: 24%;
}
.Marketing_content9_beijin {
  position: absolute;
  top: -17%;
  left: 4%;
}
.Marketing_content9_beijin img:nth-child(2) {
  position: absolute;
  top: 18%;
  left: 13%;
  max-width: 52%;
  height: auto;
}
.Marketing_content9_beijin_wenzi h2:nth-child(1) {
  font-weight: 700;
  position: absolute;
  top: -84%;
  left: 0%;
}
.Marketing_content9_beijin_wenzi {
  width: 447px;
  height: 60px;
  border-bottom: 1px dashed #f56f7e;
  position: absolute;
  top: 64%;
  left: 12%;
  font-size: 22px;
}
.Marketing_content9_beijin_wenzi h2 {
  font-weight: 700;
}
.Marketing_content9_beijin_jieshao {
  width: 447px;
  height: 107px;
  position: absolute;
  top: 73%;
  left: 12%;
}
.Marketing_content9_beijin_jieshao h2 p {
  font-size: 20px;
  color: rgb(39, 37, 37);
  font-weight: 500;
  line-height: 33px;
}

.Marketing_content10 {
  width: 617px;
  height: 752px;
  color: #f56f7e;
  font-weight: 500;
  float: right;
  white-space: nowrap;
  border: 1px dashed #f56f7e;
  border-radius: 50px;
  position: relative;
  top: 326px;
}
.Marketing_content10_beijin {
  position: absolute;
  top: -17%;
  left: 4%;
}
.Marketing_content10_beijin img:nth-child(2) {
  position: absolute;
  top: 21%;
  left: 19%;
  max-width: 60%;
  height: auto;
}
.Marketing_content10_beijin_wenzi {
  width: 447px;
  height: 60px;
  border-bottom: 1px dashed #f56f7e;
  position: absolute;
  top: 63%;
  left: 12%;
  font-size: 22px;
}
.Marketing_content10_beijin_wenzi h2:nth-child(1){
    position: absolute;
    top: -74%;
    left: 0%;
}
.Marketing_content10_beijin_wenzi h2 {
  font-weight: 700;
}
.Marketing_content10_beijin_jieshao {
  width: 447px;
  height: 107px;
  position: absolute;
  top: 73%;
  left: 12%;
}
.Marketing_content10_beijin_jieshao h2 p {
  font-size: 20px;
  color: rgb(39, 37, 37);
  font-weight: 500;
  line-height: 33px;
}
.bottom-tips{
  width: 100%;
  height: 50px;
  margin-top: 400px;
  margin-bottom: 111px;
}
.bottom-tips_h2{
        width: 1216px;
        height: 69px;
        line-height: 69px;
        color: #F3F8FF;
        font-weight: 500;
        background: linear-gradient(86deg, #FFFFFF 0%, #5C74DE 37%, #FFFFFF 100%);
        margin: 0 auto;
}
.bottom-tips_h2 h2{
  font-size: 42px;
  text-align: center;
}
</style>